<script>
import config from "../../config";
export default {
  computed: {
    config() {
      return config
    }
  },
  data(){
    return{
        name:'',
        pageNum:1,
        pageSize:5,
        total:0,
        tableData: [],
        form: {},
        ids:[],
        dialogFormVisible: false,
        rules: {
            name: [
                { required: true, message: '请输入名称', trigger: 'blur' },
            ]
        },
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
    }
  },
  created() {
    this.load(1)
  },
  methods: {
        handleSelectionChange(rows){ // 当前选中的所有的行数据
            this.ids = rows.map(v => v.id)
        },
        delBatch() {   // 批量删除
              if (!this.ids.length) {
                this.$message.warning('请选择数据')
                return
              }
              this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
                this.$request.delete('/user/delete/batch', {data: this.ids}).then(res => {
                  if (res.code === '200') {   // 表示操作成功
                    this.$message.success('操作成功')
                    this.load(1) //刷新表格
                  } else {
                    this.$message.error(res.msg)  // 弹出错误的信息
                  }
                })
              }).catch(() => {
              })
        },
        load(pageNum) {  // 分页查询
              if (pageNum) this.pageNum = pageNum
              this.$request.get('/user/page', {
                params: {
                   name: this.name,
                   pageNum: this.pageNum,
                   pageSize: this.pageSize
                }
              }).then(res => {
                this.tableData = res.data?.records
                this.total = res.data?.total
              })
        },

        reset() {
              this.name = null
              this.load(1)
        },
        handleCurrentChange(pageNum) {
              this.load(pageNum)
        },
        handleAdd() {   // 新增数据
              this.form = {}  // 新增数据的时候清空数据
              this.dialogFormVisible = true   // 打开弹窗
        },
        handleEdit(row) {   // 编辑数据
              this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
              this.dialogFormVisible = true   // 打开弹窗
        },
        save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
              this.$refs.ruleFormRef.validate((valid) => {
                if (valid) {
                  this.$request({
                     url: '/user',
                     method: this.form.id ? 'put' : 'post',
                     data: this.form
                  }).then(res => {
                    if (res.code === '200') {  // 表示成功保存
                      this.$message.success('保存成功')
                      this.load(1)
                      this.dialogFormVisible = false
                    } else {
                      this.$message.error(res.msg)  // 弹出错误的信息
                    }
                  })
                }
              })
        },
         del(id) {   // 单个删除
              this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
                this.$request.delete('/user/' + id).then(res => {
                  if (res.code === '200') {   // 表示操作成功
                    this.$message.success('操作成功')
                    this.load(1)
                  } else {
                    this.$message.error(res.msg)  // 弹出错误的信息
                  }
                })
              }).catch(() => {
              })
         },
         // 导出接口
        exportData(){
             window.open(`http://${config.serverUrl}/user/export`)
        },
        handleImportSuccess (){
          // 刷新表格
          load()
          this.$message.success("导入成功")
        },
        handleFileUploadSuccess(res,file, fileList){
          this.form.file = res.msg
          this.$message.success('上传成功')
        },
        handleImgUploadSuccess(res, file, fileList){
          this.form.img = res.msg
          this.$message.success('上传成功')
        }
  }


}


/* const userStore = useUserStore()
const token = userStore.getBearerToken
const auths = userStore.getAuths */

</script>

<template>
  <div>
    <div>
     <el-input placeholder="请输入关键字查询" style="width: 200px" v-model="name"></el-input>
     <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
     <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
       <div class="operation">
            <el-button type="primary" plain @click="handleAdd">新增</el-button>
            <el-button type="danger" plain @click="delBatch">批量删除</el-button>
       </div>
      <el-upload
          :show-file-list="false"
          style="display: inline-block; position: relative; top: 3px"
          :action='`http://${config.serverUrl}/user/import`'
          :on-success="handleImportSuccess"
          :headers="{ token: user.token}"
      >
         <el-button type="primary" plain>批量导入</el-button>
      </el-upload>
      <el-button type="info" plain @click="exportData">批量导出</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-table :data="tableData" stripe border  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
                  <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="username" label="用户名称"></el-table-column>
      <el-table-column prop="password" label="用户密码"></el-table-column>
      <el-table-column prop="email" label="用户邮箱"></el-table-column>
      <el-table-column prop="phone" label="用户电话"></el-table-column>
      <el-table-column prop="status" label="用户状态"></el-table-column>
      <el-table-column prop="avatar" label="用户头像"></el-table-column>
      <el-table-column prop="role" label="用户角色"></el-table-column>

        <el-table-column label="操作" width="180">
          <template v-slot="scope">
                <el-button type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" plain @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin: 10px 0">
      <el-pagination
          @current-change="load"
          @size-change="load"
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background
          :page-sizes="[2, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>

    <el-dialog :visible.sync="dialogFormVisible" title="动态信息" width="40%">
      <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="80px" style="padding: 0 20px" status-icon>
        <el-form-item prop="username" label="用户名称">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="用户密码">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="用户邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="用户电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="用户状态">
          <el-input v-model="form.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="avatar" label="用户头像">
          <el-input v-model="form.avatar" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="role" label="用户角色">
          <el-input v-model="form.role" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>